<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.type_no" placeholder="款号" @keyup.enter.native="searchBtn" size="small"
                              style="width: 150px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.sku_code" placeholder="SKU" @keyup.enter.native="searchBtn" size="small"
                              style="width: 150px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" @click="addBtn" size="small" :loading="btnLoading">新增吊牌</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small">
                <el-table-column label="品名" align="center" prop="product_name" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column label="款号" align="center" prop="type_no" width="110"></el-table-column>
                <el-table-column label="SKU" align="center" prop="sku_code" width="150">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" @click="linkTo(row.sku_code, 'produce_tag_check')">{{ row.sku_code }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="安全类别" align="center" prop="safety_category" width="150"></el-table-column>
                <el-table-column label="执行标准" align="center" prop="executive_standard" width="150"></el-table-column>
                <el-table-column label="面料" align="center" prop="fabric"></el-table-column>
                <el-table-column label="状态" align="center" prop="m_status" width="80">
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.m_status == 0" size="mini" type="info">未确认</el-tag>
                        <el-tag v-else type="success" size="mini">已确认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="{ row }">
                        <el-button type="text" class="el-icon-edit" @click="editBtn(row)" :disabled="!!row.m_status"></el-button>
                        <el-button type="text" class="el-icon-delete" :style="row.m_status ? '':'color: red'" @click="delBtn(row.id)" :disabled="!!row.m_status"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--新增、编辑-->
        <el-drawer :title="saveForm.id?'编辑吊牌':'新增吊牌'" :visible.sync="saveVisible" size="700px" direction="rtl" :wrapperClosable="false">
            <el-row style="padding: 0 0 10px 10px;overflow-y: auto" v-loading="blurLoading" :style="{'height': drawHeight}">
                <el-form :model="saveForm" :rules="rules" ref="form" label-width="100px">
                    <el-form-item label="品名" prop="product_name">
                        <el-input placeholder="请输入品名" v-model="saveForm.product_name" size="small" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="款号" prop="type_no">
                        <el-input placeholder="请输入款号" v-model="saveForm.type_no" @blur="blurBtn" :disabled="!!saveForm.id" size="small" style="width: 80%"></el-input>
                        <div v-if="skuCodeList.length">
                            <div>设计款名：{{ typeNameObj.type_name }}</div>
                            <div>巨益款名：{{ typeNameObj.type_name_jy }}</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="SKU" prop="sku_code">
                        <el-input placeholder="请输入SKU" v-model="saveForm.sku_code" v-if="saveForm.id" :disabled="!!saveForm.id" size="small" style="width: 80%"></el-input>
                        <div v-else>
                            <el-checkbox v-if="skuCodeList.length" :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">全选</el-checkbox>
                            <el-checkbox-group v-model="saveForm.sku_code">
                                <el-checkbox v-for="(item, index) in skuCodeList" :label="item" :key="index">{{ item }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="执行标准" prop="executive_standard">
                        <el-select v-model="saveForm.executive_standard" placeholder="请选择" size="small" style="width: 80%" clearable filterable>
                            <el-option v-for="item in safetyData[3]" :key="item.id" :label="item.title_des" :value="item.title"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="安全级别">
                        <el-select v-model="saveForm.safety_category" placeholder="请选择" size="small" style="width: 80%" clearable filterable>
                            <el-option v-for="item in safetyData[4]" :key="item.id" :label="item.title" :value="item.title"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="面料1" prop="lining_one">
                        <el-input placeholder="请输入面料1" v-model="saveForm.lining_one" size="small" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="面料2" prop="lining_two">
                        <el-input placeholder="请输入面料2" v-model="saveForm.lining_two" size="small" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="面料3" prop="lining_three">
                        <el-input placeholder="请输入面料3" v-model="saveForm.lining_three" size="small" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="面料4" prop="lining_four">
                        <el-input placeholder="请输入面料4" v-model="saveForm.lining_four" size="small" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="面料5" prop="lining_five">
                        <el-input placeholder="请输入面料5" v-model="saveForm.lining_five" size="small" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button @click="saveVisible=false">取 消</el-button>
                <el-button type="primary" @click="saveBtn" :loading="saveLoading" :disabled="!!saveForm.m_status">{{ saveLoading ? '提交中 ...' : '保 存' }}</el-button>
            </div>
        </el-drawer>
    </section>
</template>

<script>
import {tagList, tagDel, tagSkuList, tagSave} from "@/api/produce/tag";
import {safetyList} from "@/api/produce/safety";

export default {
    name: "produce_tag_manage",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            drawHeight: window.innerHeight - 150+"px",
            form: {type_no:"", sku_code: ""},
            fabrics: ['lining_one', 'lining_two', 'lining_three', 'lining_four', 'lining_five'],
            saveForm: {
                product_name: "",
                type_no: "",
                sku_code: [],
                executive_standard: "",
                safety_category: "",
                lining_one: "",
                lining_two: "",
                lining_three: "",
                lining_four: "",
                lining_five: "",
            },
            saveVisible: false,
            saveLoading: false,
            blurLoading: false,
            rules: {
                product_name: [
                    { required: true, message: "请输入品名", trigger: "blur" },
                ],
                type_no: [{ required: true, message: "请输入款号", trigger: "blur" }],
                sku_code: [{ required: true, message: "请输入SKU", trigger: "blur" }],
                executive_standard: [
                    { required: true, message: "请选择执行标准", trigger: "blur" },
                ]
            },
            skuCodeList: [],
            isIndeterminate: true,
            checkAll: false,
            safetyData: {},
            typeNameObj: {},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{
        // 监听路由参数的变化
        '$route.params.sku_code': {
            immediate: true,
            handler(val) {
                if(!!val && val != this.form.sku_code){
                    this.$set(this.form, 'sku_code', val);
                    this.searchBtn();
                }
            }
        },
    },
    methods: {
        //跳转
        linkTo(val, page){
            this.$router.push({name: page, params: {sku_code: val}});
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            if(this.form.type_no){
                param.type_no = this.form.type_no;
            }
            if(this.form.sku_code){
                param.sku_code = this.form.sku_code;
            }
            this.loading = true;
            tagList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        getSafetyData(types){
            safetyList({page: 1, limit: 1000, types: types}).then((res) => {
                this.safetyData[types] = res.data.data;
            }).catch(() => {

            });
        },
        blurBtn(){
            this.blurLoading = true;
            tagSkuList({type_no: this.saveForm.type_no}).then((res) =>{
                this.blurLoading = false;
                this.skuCodeList = [];
                if(res.code !== 0 || res.data.length==0){
                    this.$message.warning("sku为空, 请确认巨益商品信息是否维护...");
                }else{
                    this.skuCodeList = res.data.sku_list;
                    this.typeNameObj = {
                        type_name: res.data.type_name,
                        type_name_jy: res.data.type_name_jy
                    };
                    this.saveForm.product_name = res.data.short_name;
                    this.saveForm.executive_standard = res.data.executive_standard;
                    this.saveForm.safety_category = res.data.safety_category;
                }
            }).catch(()=>{
                this.blurLoading = false;
            })
        },
        checkAllChange(val){
            this.saveForm.sku_code = val ? this.skuCodeList : [];
            this.isIndeterminate = false;
        },
        addBtn(){
            this.saveForm = {
                product_name: "",
                type_no: "",
                sku_code: [],
                executive_standard: "",
                safety_category: "",
                lining_one: "",
                lining_two: "",
                lining_three: "",
                lining_four: "",
                lining_five: "",
            };
            this.skuCodeList = [];
            this.saveVisible = true;
        },
        editBtn(row){
            this.saveForm = JSON.parse(JSON.stringify(row));
            this.saveVisible = true;
        },
        delBtn(id){
            this.$confirm("确定删除该吊牌?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                tagDel({id: id}).then((res) =>{
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("删除成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                })
            }).catch(() => {});
        },
        saveBtn(){
            if(!this.saveForm.id && this.saveForm.sku_code.length == 0){
                this.$message.warning("必填内容不能为空");
                return;
            }
            if(!this.saveForm.product_name || !this.saveForm.type_no || !this.saveForm.executive_standard){
                this.$message.warning("必填内容不能为空");
                return;
            }
            this.saveLoading = true;
            tagSave({data: JSON.stringify(this.saveForm)}).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("保存成功");
                    this.saveVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
    },
    mounted() {
        this.searchBtn();
        this.getSafetyData(3);
        this.getSafetyData(4);
    }
}
</script>

<style scoped>

</style>
